<template>
	<div class="column-tree">
		<el-tree
			:data="tableData"
			:props="defaultProps"
			node-key="id"
			:default-expanded-keys="expandedKeys"
			@node-expand="handleNodeExpand"
			@node-collapse="handleNodeCollapse"
			style="padding: 10px 5px"
		>
			<span class="custom-tree-node" slot-scope="{ node, data }">
				<span :class="['sheng', 'node-names', { active: data.id == curColumn.id }]" :title="node.data.name" @click="handleClick(data)">
					<b :class="[nameIcon(data), data.classType == 1 ? 'color-theme' : '']"></b>
					{{ node.data.name }}
				</span>
				<span width="200" class="btns" v-if="data.isOutsite != 1">
					<template v-if="data.classType == 1 && userType == 1 && isShowHanle(data)">
						<el-button type="text" title="添加源" class="el-icon-plus" @click.stop="() => handleAdd(data)">添加源</el-button>
					</template>
					<template v-if="data.classType != 1 && userType == 1 && isShowHanle(data)">
						<el-button type="text" title="编辑" class="el-icon-edit" @click.stop="() => handleEdit(data)"></el-button>
					</template>
					<template v-if="data.classType != 1 && userType == 1 && isShowHanle(data)">
						<el-button type="text" class="el-icon-minus" title="删除" @click.stop="() => handleDelete(data)"></el-button>
					</template>
				</span>
			</span>
		</el-tree>
	</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import columnIcon from '../public/columnIcon';
export default {
	mixins: [columnIcon],
	data() {
		return {
			expandedKeys: [],
			listQuery: {
				// pId: 0,
			},
			tableData: [],
			defaultProps: {
				children: 'childList',
				label: 'name'
			},
			siteColumnIds: []
		};
	},
	computed: {
		...mapGetters(['curColumn', 'userType']),
		isShowHanle() {
			return (data) => {
				let dataArr = data.idPath.split('/').filter((item) => !!item);
				return !dataArr.some((item) => this.siteColumnIds.some((n) => n.value === item));
			};
		}
	},
	mounted() {
		this.getList();
		this.$bus.$on('getWebColumnList', (v) => {
			if (v) {
				Object.assign(this.listQuery, v);
			}
			this.getList();
		});
	},
	beforeDestroy() {
		this.$bus.$off('getWebColumnList');
	},
	methods: {
		...mapActions(['getDictionaryEnumListVal']),
		async getList() {
			let columns = await this.getDictionaryEnumListVal('SITE_COLUMN_ID').then((res) => res);
			let res = await this.$store.dispatch('queryWebColumn', this.listQuery);
			this.siteColumnIds = columns;
			this.getColumnByUserId(res.data);
		},
		async getColumnByUserId(webColumn) {
			let userId = this.$store.getters.userId;
			let res = await this.$store.dispatch('querySysRoleColumnGetAll', userId);
			let columnTreeData = this.recursionColumn(webColumn, res.data[0]);
			this.tableData = columnTreeData;
			this.$store.commit('SET_COLUMNDATA', columnTreeData);
		},

		//按权限递归栏目，超管拥有全部栏目权限
		recursionColumn(column, idArr) {
			if (column.length == 0) return;
			// 过滤第一级
			column = column.filter((v) => idArr.includes(v.id) || v.classType != 1);
			// 过滤childList
			column.forEach((item) => {
				if (item.childList.length == 0) return;
				let arr = [];
				item.childList.forEach((v) => {
					if (idArr.includes(v.id) || v.classType != 1) {
						arr.push(v);
					}
				});
				this.$set(item, 'childList', arr);
				this.recursionColumn(item.childList, idArr);
			});
			return column;
		},
		handleClick(row) {
			if (row.classType == 41) {
				this.$store.commit('changeJournalFlag', true);
			}
			this.$store.commit('SET_COLUMN', row);
		},
		handleEdit(row) {
			this.$bus.$emit('columnSourceAdd', row, 'edit');
		},
		handleAdd(row) {
			this.$bus.$emit('columnSourceAdd', row, 'add');
		},
		handleDelete(row) {
			this.$confirm('确定要删除吗?', '提示', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.delete(row);
				})
				.catch(() => {});
		},
		async delete(row) {
			await this.$store.dispatch('deleteWebColumn', row);
			this.getList();
		},
		//节点展开
		handleNodeExpand(row) {
			this.expandedKeys.push(row.id);
		},
		//节点收起
		handleNodeCollapse(row) {
			let idx = this.expandedKeys.indexOf(row.id);
			this.expandedKeys.splice(idx, 1);
		}
	}
};
</script>
<style scoped lang="scss">
.column-tree {
	position: absolute;
	top: 30px;
	left: 0;
	right: 0;
	bottom: 0;
	margin-top: 10px;
	padding: 10px;
	min-height: 600px;
	background: #f5f7fa;
	.custom-tree-node {
		width: 310px;
		border-bottom: 1px dashed #eee;
		.node-names {
			float: left;
			width: 200px;
			line-height: 40px;
			&.active {
				color: $mainColor;
				font-weight: bold;
			}
		}
		.btns {
			float: right;
		}
	}
}
</style>
<style scoped>
.column-tree >>> .el-tree-node__content {
	height: auto;
}
.column-tree >>> .el-tree-node__children .el-tree-node__content {
	padding-right: 34px;
}
</style>
